<template>
  <div class="blog">
    <div class="container">
      <h3>{{series_title}}</h3>
      <input class="search" type="text" @keyup="search" placeholder="搜索" v-model="searchVal">
      <ul class="all-blogs">
        <li v-for="item in series_blog" :key="item.id">
          <blog-list :id='item.id'
                     :summary="item.summary"
                     :date="item.create_time"
                     :title="item.title"
                     :picture="item.essay_picture"></blog-list>
        </li>
      </ul>
      <bottom-line></bottom-line>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import BlogList from 'base/blog-list'
import bottomLine from 'base/bottom-line'
export default{
  props: ['id'],
  data () {
    return {
      url: '/Essay/series/',
      series_blog: '',
      series_title: '',
      searchUrl: '/Essay/search_essay/',
      searchVal: '',
      blogList: ''
    }
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getSeries(to.params.id)
  },
  mounted () {
    this.getSeries(this.id)
  },
  methods: {
    getSeries (id) {
      this.$http.get(this.domain + this.url + id).then(res => {
        this.blogList = res.data.essay_series
        this.series_blog = this.blogList
        this.series_title = res.data.series_name
      }, res => {
        this.$router.push({path: '/error'})
      })
    },
    search () {
      this.searchVal = this.searchVal.trim()
      if (this.searchVal) {
        this.$http.get(this.domain + this.searchUrl + this.searchVal).then(res => {
          if (res.data.length > 0) {
            this.series_blog = res.data
          } else {
            this.series_blog = this.blogList
            alert('不好意思😅，主人有点懒，还没有记录相关文章')
          }
        }, res => {
          this.$router.push({path: '/error'})
        })
      } else {
        this.series_blog = this.blogList
      }
    }
  },
  components: {
    BlogList,
    bottomLine
  }
}
</script>
<style scoped rel="stylesheet/stylus" lang="stylus">

</style>
